import React, { Component } from 'react'
import Table from '../dulifile/Table.js'
import { baseUrl } from '../Tools/Ajax.js'
import axios from 'axios'
import RibaoForm from'../components/RibaoForm.js'

const columns = [
   {title:'姓名', dataIndex:'name'},
   {title:'学习内容', dataIndex:'content'},
   {title:'遇到的问题', dataIndex:'question'},
   {title:'个人总结', dataIndex:'summary'},
   {title:'创建的日期', dataIndex:'create_time'},
] 


export default class Ribao extends Component {
    
    state = {
        RibaoList: [],
        showForm: false,
        isUpdate: false,
        checkedStudents:[],
        currPage: 1,
        pageSize: 5,
        total: 0
    }

    componentDidMount() {
        this.getRibaoData()
    }

    getRibaoData=()=>{
        const { currPage, pageSize } = this.state
        axios({
            method: 'get',
            url: baseUrl + `xy_ribao?transform=1&order=id,desc&page=${currPage},${pageSize}`
        }).then((res) => {
            this.setState({ RibaoList: res.data.xy_ribao, total: res.data._results})
        }).catch()
    }

    addInfo=()=>{
        this.setState({ showForm: true, isUpdate: false, checkedStudents: []})
    }

    closeForm=()=>{
        this.setState({showForm: false})
    }

    saveInfo=(rb)=>{
        let method = 'post', url = 'http://localhost/qwq/api.php/xy_ribao'
        if (this.state.isUpdate){
            method ='put',
            url +='/'+ rb.id
        }

        axios({
            method: method,
            url: url,
            data: rb
        }).then(res=>{
            this.getRibaoData()  
            this.closeForm()
        })
    }

    updateInfo = () => {
        // this.setState({ showForm: true, isUpdate: true })
        if (this.state.checkedStudents.length === 0) {
            alert('请至少选择一个用户进行修改！')
        } else {
            this.setState({ showForm: true, isUpdate: true })
        }
    }
    

    deleInfo=()=>{
        console.log(this.state.checkedStudents)
        // 继续做完
        
    }


  render() {
      const { pageSize, currPage, total } = this.state

      const rowSelection = {
          onSelect: (seleted, selectedRows) => {
              this.setState({ checkedStudents: selectedRows })
          }
      }

      const paging = {
          onChange: (page, size) => {
              // console.log(page,size)
              this.setState({ currPage: page, pageSize: size }, () => {
                  this.getRibaoData()  
              })
          },
          pageSize: pageSize,
          current: currPage,
          total: total
      }

    return (
      <div>
        <section className="content-header">
            <h1>日报管理</h1>
            <ol className="breadcrumb">
                <li><a href="#"><i className="fa fa-dashboard"></i>首页</a></li>
                <li className="active">学生管理</li>
            </ol>
            <div className="row">
                <div className="btn-group col-md-9" style={{ marginTop: 20 }}>
                    <button type="button" onClick={this.addInfo} className="btn btn-primary">增加</button>
                    <button type="button" onClick={this.updateInfo} className="btn btn-warning">修改</button>
                    <button type="button" onClick={this.deleInfo} className="btn btn-danger">删除</button>
                </div>
                <div className="input-group input-group-sm col-md-3">
                    <input type="text" className="form-control" />
                    <span className="input-group-btn">
                        <button type="button" className="btn btn-info btn-flat">搜索</button>
                    </span>
                </div>
            </div>
        </section>
        <Table
            columns={columns} 
            dataSource={this.state.RibaoList}
            showIndex={true}
            rowSelection={rowSelection}
            pagination={paging}
            />  

            { this.state.showForm ? 
            <RibaoForm 
            closeForm={this.closeForm}
            saveInfo={this.saveInfo}
            isUpdate={this.state.isUpdate} 
            student={this.state.checkedStudents[0]}
            deleInfo={this.deleInfo}   
            /> : ''}           
      </div>
    )
  }
}
